import React, { Component } from 'react';
import { Link } from 'react-router';
import { Svg } from "src/components/common";
import column from '../column';
import './HelpCenter.scss';
// const svgUrl = require('./images/icon.svg');
class HelpCenter extends Component {
    componentDidMount() {
        // 控制底部区域
        let d = document.documentElement.clientHeight;
        let c = document.querySelector('.help-content');
        let s = document.querySelector('.customer-service');
        let p = document.querySelector('.prech');
        let ch = c.clientHeight;
        let sh = s.clientHeight;
        if (d < (sh + ch + 20)) {
            p.style.height = (sh + 20) + 'px';
        }
    }
    
    render() {
        return (
            <section className="help-content">
                <section className="help-center">
                    {column.map((v, k) => (
                        <Link key={k} className="help-link" to={{pathname:`/app/user/helpCenter/${v.linkName}`}}>
                             <div className="help-item">    
                                <div className="h-img"> <Svg href={require(`./images/svg-${v.linkName}.svg`)} /></div>
                                <p className="h-text">{v.name}</p>
                            </div>
                        </Link>
                    ))}
                </section>
                <div className="prech"></div>
                <section className="customer-service">
                    <div className="customer">
                        <Svg href={require('./images/svg-phone.svg')} />联系客服
                    </div>
                    <p className="text">工作日 09:00~20:00  节假日 09:00~22:00</p>
                </section>
            </section>
            
        );
    }
}

export default HelpCenter;